<template>
  <section style="display: inline-block; vertical-align: top">
    <el-select
      v-model="customerId"
      style="margin-right: 5px"
      filterable
      clearable
      class="select-width"
      @change="changeSelect"
      placeholder="请选择客户"
    >
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.name"
        :value="item.customerId"
      >
      </el-option>
    </el-select>
    <el-dialog
      :visible="visible"
      title="添加客户"
      :before-close="close"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        label-position="right"
        size="small"
        :rules="rules"
      >
        <el-form-item
          v-for="(ele, i) in formData"
          :label="ele.label"
          :prop="ele.prop"
          :key="i"
        >
          <el-input
            :placeholder="`请输入${ele.label}`"
            :disabled="ele.disabled"
            :maxLength="ele.max"
            v-model="form[ele.prop]"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="save"> 保存 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-button
      type="primary"
      icon="el-icon-plus"
      circle
      :loading="loading"
      @click="visible = true"
    ></el-button>
  </section>
</template>
<script>
import { customer } from "@/api/index";
import DictionarySelect from "@/components/basic/DictionarySelect.vue";
// import { CustomerSearch } from "@/api/customer/customer.js";
export default {
  components: { DictionarySelect },
  name: "AddCustomer",
  props: {
    value: [Number]
  },
  computed: {
    defaultValue() {
      this.customerId = this.value;
      return this.value;
    }
  },
  watch: {
    defaultValue: {
      handler(val) {
        this.customerId = val;
      }
    }
  },
  data() {
    return {
      rules: {
        name: [
          {
            required: true,
            message: "请输入客户名称",
            trigger: "blur"
          }
        ],
        contactMobile: [
          {
            required: true,
            message: "请输入联系电话",
            trigger: "blur"
          }
        ],
        contactName: [
          {
            required: true,
            message: "请输入联系人",
            trigger: "blur"
          }
        ]
      },
      form: {},
      visible: false,
      formData: [
        {
          label: "客户名称",
          prop: "name",
          max: 50
        },
        {
          label: "联系人",
          prop: "contactName",
          max: 20
        },
        {
          label: "联系电话",
          prop: "contactMobile",
          max: 50
        }
        //  {
        //   label: "所属行业",
        //   prop: "industry",
        //   type: "industry"
        // }, {
        //   label: "邮箱",
        //   prop: "email"
        // }, {
        //   label: "公司简称",
        //   prop: "abbr"
        // }
      ],
      customerId: null,
      options: [],
      loading: false,
      pagination: {
        size: 9999999,
        page: 1,
        customerTypes: [0, 2],
        totalItems: 0,
        sort: [{ name: "createAt", asc: false }]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    close() {
      this.visible = false;
    },
    async getList() {
      let { code, data } = await customer.search(this.pagination);
      if (code !== 0 || !data) return;
      this.options = data.records;
    },
    changeSelect(id) {
      const customerId = id;
      let customerItem = null;

      customerItem = this.options.find((x) => x.customerId === customerId);

      this.$emit("input", id ? customerItem : {});
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.insert();
        }
      });
    },
    async insert() {
      let { code, data } = await customer.insert(this.form);
      if (code === 0) {
        this.visible = false;
        this.getList();
        this.$emit("confirm", data);
        this.customerId = data.customerId;
      }
    }
  }
};
</script>
